<template>
   <div class="goods_mana_type-container">
    <breadcrumb style="position: absolute;width:100%;"></breadcrumb>
    <div class="content">
      <div class="query">
        <div class="margin_right_20">
          <el-button type="primary" >参与次数</el-button>
        </div>
                <div class="margin_right_20">
          <el-button type="primary" >是否中奖</el-button>
        </div>
        <div class="btn">
            
          <el-button type="primary"  @click="$router.go(-1)">返回</el-button>
          <!-- <el-button type="primary" icon="el-icon-plus" >添加</el-button> -->
          <el-dialog title="商品类型添加" :visible.sync="dialogVisible1">
            <el-form :model="form1">
              <el-form-item label="商品类型名称：" label-width="100px">
                <el-input v-model="form1.name"></el-input>
              </el-form-item>
              <el-form-item label="商品类型状态：">
                <el-select v-model="form1.status" placeholder>
                  <el-option label="禁用" value="0"></el-option>
                  <el-option label="使用" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <div class="btn">
                <el-button >取 消</el-button>
                <el-button type="primary" >确 定</el-button>
              </div>
            </div>
          </el-dialog>
        </div>
       
      </div>
    <el-scrollbar style="height:100%;">
          <div class="table">
        <el-table  style="width: 100%" height="598" border stripe>
          <el-table-column prop="" label="用户昵称"></el-table-column>
          <el-table-column prop="" label="用户ID"></el-table-column>
          <el-table-column prop="" label="参与时间"></el-table-column>
          <el-table-column prop="" label="参与次数" >  </el-table-column>
          <!-- <el-table-column prop="" label="抽奖时间"></el-table-column> -->
          <el-table-column prop="" label="是否中奖"></el-table-column>
          
          <el-table-column label="操作">
            <!-- <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
               
               
              >审核</el-button>
              <el-button
                type="text"
                size="small"
               
                v-if="scope.row.status == '禁用' ? true:false"
              >使用</el-button>
              <el-button type="text" size="small" @click="dialogVisible=true">修改</el-button>
            </template> -->
          </el-table-column>
        </el-table>
     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
     :current-page="queryInfo.pagenum" :page-sizes="[1,2,5,10]"
     :page-size="queryInfo.pageSize" layout="total,sizes,prev,pager,next,jumper"
     :total="total"
     ></el-pagination>
      </div>
    </el-scrollbar>
    <!-- 添加信息的对话框 -->
      <el-dialog title="商品类型修改" :visible.sync="dialogVisible" width="50%">
        <el-form :model="form">
          <el-form-item label="商品类型名称：" label-width="100px">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="商品类型状态：">
            <el-select v-model="form.status" placeholder>
              <el-option label="禁用" value="0"></el-option>
              <el-option label="使用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <div class="btn">
            <el-button @click="dialogVisible=false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible=false">确 定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import breadcrumb from '../../components/breadcrumb';
import pagination from '../../components/page'
export default {
    components: { breadcrumb,pagination },
      data() {
    return {
      luckySetId:this.$router.query.id,
      queryInfo:{
          query:'',
          pagenum:1,
          pagesize:2
      },
      total:0,
      goodsTypeList: [{
          "goodsNameType":"你好",
          "goodsTypeCount":''
      }
     ],
      
     
      value: "",
      value1: "",
      //控制添加信息对话框的显示与隐藏
      dialogVisible: false,
      dialogVisible1: false,
      form: {
        name: "",
        status: "1"
      },
      form1: {
        name: "",
        status: "1"
      },
    
    };
  },
  created() {
      this.getuserList()
  },
  methods: {
      getuserList(){
          this.$axios.post('web_free_lucky/drawn',this.luckySetId).then(res=>{
            //console.log(res)
          })
      },
      //监听pagesize改变的函数事件
      handleSizeChange(newSize){
          //console.log(newSize)
          this.queryInfo.pagesize=newSize
          this.getuserList()
      },
      handleCurrentChange(newPage){
          //console.log(newPage)
          this.queryInfo.pagenum=newPage
      }
  },
}
</script>
<style lang="less" scoped>
.goods_mana_type-container {
  @import "../../style/table.less";
  @import "../../style/content.less";
  display: flex;
  flex-flow: column;
  position: relative;
  height: 100%;
  .el-table .cell {
    white-space: pre-line !important;
  }
  
  .content {
    .query {
      .btn {
        .el-button {
          width: 70px;
        position: absolute;
        top:54px;
        right: 20px;
        }
      }
    }
    .el-dialog {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 620px;
      transform: translate(-50%, -50%);
      background: #fff;
      border-radius: 2px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      margin: 0;
      margin-top: 0 !important;
      .el-dialog__header {
        line-height: 70px;
        text-align: center;
        padding: 0;
        .el-dialog__title {
          font-size: 16px;
        }
      }
      .el-form-item__label {
        padding: 0;
      }
        .el-table, thead{
            background-color: #000;
        }
    
      .el-form {
        width: 320px;
        margin: 0 auto;
        .el-input {
          width: 200px;
        }
      }
      .dialog-footer {
        margin-top: 20px;

        .btn {
          text-align: center;
          margin-top: 50px;
          button {
            height: 30px;
            line-height: 30px;
            padding: 0;
            width: 70px;
          }
        }
      }
    }
  }
  .el-pagination{
      text-align: center;
      margin-top: 15px;
  }
}
</style>